<template>
	<view class="content" :class="['qn-page-'+theme]">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.relName" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<RegionSel @getRegionName="getRegionName" @pickerRegionChange="pickerRegionChange" :provinceCode="provinceCode" :cityCode="cityCode" :districtCode="districtCode">
			<view class="row b-b clearfix">
				<view class="tit float_left">地址</view>
				<view class="float_right">
					<span v-if="region_name" style="font-size: 28rpx;">{{ region_name }}</span>
					<span v-else style="color: #999;font-size: 28rpx;">请选择</span>
				</view>
			</view>
		</RegionSel>
		<view class="row b-b">
			<text class="tit">详细地址</text>
			<input class="input" type="button" v-model="addressData.address" placeholder="楼号、门牌" placeholder-class="placeholder" />
		</view>

		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="defaule" color="#45A418" @change="switchChange" />
		</view>
		<button class="add-btn primary-btn" @click="addAddress">提交</button>
	</view>
</template>

<script>
import RegionSel from '@/components/region/RegionSel.vue';
export default {
	components: {
		RegionSel
	},
	data() {
		return {
			provinceCode: 0,
			cityCode: 0,
			districtCode: 0,
			region_name: '',
			// 地址部分
			height: '500px',
			address: [],
			defaule: false,
			// 修改地址的id
			address_id: '',
			addressData: {
				relName: '',
				mobile: '',
				defaultStatus: 4,
				provinceCode: '',
				cityCode: '',
				districtCode: '',
				address: '',
			}
		};
	},
	onLoad(option) {
		// 获取当前是增加页面还是编辑
		if (option.id) {
			console.log(option.id)
			this.address_id = option.id;
			this.getShippingAddressInfo();
			uni.setNavigationBarTitle({
				title: '修改地址'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '新增地址'
			});
		}
	},
	methods: {
		switchChange(val) {
			// 添加地址传
			this.defaule = val.detail.value;
			if (this.defaule) {
				this.addressData.defaultStatus = 5;
			} else {
				this.addressData.defaultStatus = 4;
			}
		},
		getRegionName(name) {
			this.region_name = name;
		},
		pickerRegionChange(row) {
			this.addressData.provinceCode = row[0].value;
			this.addressData.cityCode = row[1].value || '';
			this.addressData.districtCode = row[2].value || '';
			this.region_name = row[0].label + (row[1].label ? '-' + row[1].label + (row[2].label ? '-' + row[2].label : '') : '');
		},
		
		// 获取地址的详情
		async getShippingAddressInfo() {
			this.$u.api.detailAddress(this.address_id).then(({data})=>{
				console.log(data)
				this.addressData = data;
				this.provinceCode = this.addressData.provinceCode;
				this.cityCode = this.addressData.cityCode;
				this.districtCode = this.addressData.districtCode;
				// 获取地址显示页面
				this.defaule = data.defaultStatus === 5;
			})
			
		},
		// 提交
		async addAddress() {
			if (!this.addressData.relName) {
				this.$u.toast('请填写收货人姓名');
				return;
			}
			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.addressData.mobile)) {
				this.$u.toast('请输入正确的手机号码');
				return;
			}
			if (!this.addressData.address) {
				this.$u.toast('请填写门牌号信息');
				return;
			}
			if(this.address_id){
				this.$u.api.editAddress(this.address_id, this.addressData).then(res=>{
					this.$u.toast('修改成功');
					setTimeout(function() {
						uni.navigateBack();
					}, 800);
				})
			}else{
				this.$u.api.addAddress(this.addressData).then(res=>{
					this.$u.toast('新增成功');
					setTimeout(function() {
						uni.navigateBack();
					}, 800);
				})
			}
			
			
		}
	}
};
</script>

<style lang="scss">
page {
	padding-top: 16upx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;
	border-bottom: 1px solid #f4f4f4;

	.tit {
		flex-shrink: 0;
		width: 120upx;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.input {
		flex: 1;
		font-size: 28upx;
		color: $font-color-dark;
	}
}

.default-row {
	margin-top: 16upx;

	.tit {
		flex: 1;
	}

	switch {
		transform: translateX(16upx) scale(0.9);
	}
}

.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: 32upx;
	color: #fff;
	border-radius: 12upx;
	background-color: $price-color;
}
.add-btn:after {
	border: 0 none;
}
</style>
